<template>
  <!-- 表格容器：可加padding避免贴边 -->
  <div style="padding: 20px;">
    <el-table :data="tableData" border style="width: 100%;">
      <el-table-column prop="date" label="日期" width="140" />
      <el-table-column prop="name" label="姓名" width="120" />
      <el-table-column prop="address" label="地址" />
    </el-table>
  </div>
</template>

<!-- 关键：Vue 3 单文件组件需用 <script setup> 标识（否则无法自动注册组件/响应式生效） -->
<script setup>
// 1. 导入 Element Plus 表格组件 + 样式（必须导入样式，否则表格无样式）
import { ElTable, ElTableColumn } from "element-plus";
import "element-plus/theme-chalk/el-table.css"; // 表格样式文件
import "element-plus/theme-chalk/el-table-column.css"; // 表格列样式文件

// 2. 导入 Vue 3 响应式 API
import { ref } from "vue";

// 3. 表格数据（修复中文注释格式 + 多余等号）
const tableData = ref(
    Array.from({ length: 20 }).map((_, index) => ({
      date: `2016-05-0${index % 9 + 1}`,
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄",
      id: index + 1,
    }))
);
</script>

<style scoped>
/* 可选：如需自定义表格样式，可在这里添加 */
/* 示例：修改表格表头背景色 */
:deep(.el-table__header-wrapper th) {
  background-color: #f5f7fa;
}
</style>